<!--  -->
<template>
  <div
    id="collect-button"
    :class="[status ? 'collect-true' : 'collect-false']"
    @click="changeStatus"
  >
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-cmicon_favorite"></use>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  props: {
    status: {
      type: Boolean,
      default: false,
      required: true,
    },
  },

  components: {},

  computed: {},

  methods: {
    changeStatus() {},
  },
};
</script>
<style>
#collect-button {
  position: relative;
  height: 50px;
  width: 50px;
  cursor: pointer;
}
#collect-button > .icon {
  position: absolute;
  height: 16px;
  width: 16px;
  left: 17px;
  top: 17px;
}
.collect-true {
  color: rgb(105, 121, 251);
  transition: all 0.3s;
}
.collect-false {
  color: rgb(170, 184, 194);
  transition: all 0.3s;
}
.collect-false:hover {
  transform: translateY(-4px);
  transform-origin: bottom;
}
</style>